<template>
	<section>
		<div>
			<mt-header fixed title="客 服">
				<mt-button slot="left" icon="back" @click="goBack"></mt-button>
			</mt-header>
			<!-- {{channelInfo}} -->
			<div class="ml20 mr20 mt50" ref="meiqiaqq">
				<h3 class="tl fs14 lh30">Hi</h3>
				<p class="tl fs14 lh30">我是您的专属客服：很高兴为您服务...</p>
				<img class="mt50 ml40" :src="girlImg" width="50%" alt>

				<!-- QQ -->
				<p id="openqqbtn" class="tc fs14" v-show="this.channelInfo.qqType!=3">
					<a rel="nofollow" href="javascript:;">
						<span class="lh30 link bgred white" @click="openQQ">点击联系我</span>
					</a>
				</p>

				<!-- 美洽 -->
				<p class="lh30 tc fs14 mt20" v-show="this.channelInfo.qqType==3">
					<a rel="nofollow" :href="meiqiaUrl">
						<span class="link bgred white">点击联系我</span>
					</a>
				</p>

				<p class="lh50">工作时间：周一6:00 至周六 6:00</p>
				<p v-show="this.channelInfo.qqType==3" class="lh40 fs14">美洽客服</p>
			</div>
		</div>
		<div class="mt40" ref="live8000" style="display:none;">
			<iframe
				id="csIframe"
				name="csIframe"
				:src="this.getLive8000Src"
				width="100%"
				:height="screenHeight"
				frameborder="0"
				allowtransparency="true"
				scrolling="no"
				allowfullscreen
				style="display: block;"
			></iframe>
		</div>
	</section>
</template>
<script>
import { MessageBox, Toast, Indicator } from 'mint-ui'
import axios from 'axios'

import { mapState } from 'vuex'
export default {
	name: 'Service',
	components: {},
	data() {
		return {
			screenHeight: 617,
			girlImg: './static/imgs/service.png',
			meiqiaUrl: '',
			jsessionId: window.jsessionId || ''
		}
	},
	mounted() {
		this.getChannelInfo()
		var qq = this.channelInfo.qq || 800185083

		function createScript(url, callback) {
			var oScript = document.createElement('script')
			oScript.type = 'text/javascript'
			oScript.async = true
			oScript.src = url
			/*
			 ** script标签的onload和onreadystatechange事件
			 ** IE6/7/8支持onreadystatechange事件
			 ** IE9/10支持onreadystatechange和onload事件
			 ** Firefox/Chrome/Opera支持onload事件
			 */

			document.body.appendChild(oScript)
			oScript.onload = function() {
				if (callback) {
					callback()
				}
			}
		}

		createScript('https://wpa.b.qq.com/cgi/wpa.php', function() {
			console.log('wpa.php-->加载完成', BizQQWPA)
			BizQQWPA.addCustom({
				aty: '0',
				a: '0',
				nameAccount: qq,
				selector: 'openqqbtn'
			})
		})
		this.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40
	},
	computed: {
		...mapState(['channelInfo', 'userInfo']),
		getLive8000Src() {
			let src = 'https://v88.live800.com/live800/chatClient/chatbox.jsp?companyID=1031742&configID=12378&jid=1019701042&s=1&jsessionId=' + this.jsessionId + '&jid=1019701042&info='
			if (this.userInfo.userPhone) {
				return src + window.location.host + this.userInfo.userName
			} else {
				return src + window.location.host + 'youke'
			}
		}
	},
	methods: {
		getChannelInfo() {
			//加载渠道信息
			axios
				.get('/user/user/getChannelByDomain.do')
				.then(res => {
					res = res.data
					if (res.code == 200) {
						// 通过methods mapMutations -->vuex
						this.$store.commit('setChannelInfo', res.data)
					}
				})
				.then(() => {
					this.getKefu()
				})
				.catch(function(error) {
					console.log(error)
				})
		},
		getKefu() {
			if (this.channelInfo.qqType) {
				if (this.channelInfo.qqType === 3) {
					//美洽
					var url = 'https://static.meiqia.com/dist/standalone.html?_=t&eid=' + this.channelInfo.qq
					this.meiqiaUrl = url
					//   this.$refs.meiqiaqq.style.display = "block";
				} else if (this.channelInfo.qqType === 4) {
					this.$refs.live8000.style.display = 'block'
					this.$refs.meiqiaqq.style.display = 'none'
				} else {
					//   this.$refs.meiqiaqq.style.display = "block";
				}
			} else {
				console.log('未配置客服信息')
			}
		},
		openQQ() {
			var qq = this.channelInfo.qq || 800185083
			BizQQWPA.addCustom({
				aty: '0',
				a: '0',
				nameAccount: qq,
				selector: 'openqqbtn'
			})

			Indicator.open('努力打开QQ中')
			var timer = setTimeout(() => {
				Indicator.close()
				clearTimeout(timer)
			}, 10000)
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>
<style scoped>
span.link {
	width: 150px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
}
</style>